<template>
  <div class="addr-pop-con">
    <!-- 弹窗 -->
    <div class="popup-mask"></div>
    <div class="fix-transform-blur">
      <div class="popup-box">
        <!-- 新增地址 -->
        <div class="tit">
          <div class="text" v-if="editAddrId">编辑提报人</div>
          <div class="text" v-else>新建提报人</div>
          <div class="close" @click="hidePop"></div>
        </div>
        <div class="con">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="ruleForm.mobile" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="department">
              <el-input v-model="ruleForm.department"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="float:right" type="primary" @click="submitForm('ruleForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- /新增地址 -->
      </div>
    </div>
    <!-- /弹窗 -->
  </div>
</template>

<script>
  import util from '../plugins/util'
  export default {
    props: {
      editAddrId: {
        type: String
      }
    },
    data() {
      var mobileValidate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入电话号码'));
        } else if (value.length!==11) {
          callback(new Error('请输入正确的电话号码'));
        } else {
          callback();
        }
      };
      return {

        errTip: 0, // 错误提示: 1收件人 2手机号 3地区数据 4详细地址
        ruleForm: {
          name: '',
          mobile: '',
          department: ''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          mobile: [{
            validator: mobileValidate,
            trigger: 'blur'
          },{
            required: true,
            message: '请输入电话号码',
            trigger: 'blur'
          }],

        }
      }
    },
    mounted() {
      // this.init()
      if (this.editAddrId) {
        this.getTbInfo(this.editAddrId)
      }
    },
    methods: {
      // 获取提报人详情
      getTbInfo(id) {
        this.$axios.get('/p/cp/submit/person/info/' + id).then(({
          data
        }) => {
          //编辑提交时精确传参
          this.ruleForm.name = data.name
          this.ruleForm.mobile = data.mobile
          this.ruleForm.department = data.department
        })
      },
      //提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {

          if (valid) {
            if (this.editAddrId) {
              this.ruleForm.id = this.editAddrId
            }
            this.$axios({
              method: this.editAddrId ? 'put' : 'post',
              url: this.editAddrId ? '/p/cp/submit/person/update' : '/p/cp/submit/person/add',
              data: this.ruleForm,
            }).then(({
              data
            }) => {
              this.$message({
                message: this.ruleForm.id ? '修改成功' : '添加成功',
                type: 'success',
                duration: 1000
              })
              this.$emit('toggleAddrPop', false)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      /**
       * 隐藏新增地址弹窗
       */
      hidePop() {
        this.$emit('toggleAddrPop', false);
      },

    }
  }
</script>

<style>
  .el-input__inner {
    border: 1px solid #dcdfe6 !important;
  }

  .el-form-item.is-error .el-input__inner,
  .el-form-item.is-error .el-input__inner:focus,
  .el-form-item.is-error .el-textarea__inner,
  .el-form-item.is-error .el-textarea__inner:focus {
    border-color: #f56c6c !important;
  }
</style>
